<template>
  <div class="enWorkingInOrder">
    <div class="order-info">
    <ul class="pl10 pb15">
      <li class="rowflex">
        <div class="info-item c666 ">工单编号</div>
        <div>{{orderInfo.code}}<span class="ml10">{{_dateFormat(orderInfo.createdTime)}}</span>  </div>
      </li>
      <li class="rowflex">
        <div class="info-item c666">派单人</div>
        <div>{{backgrounderInfo.loginName}}</div>
      </li>
      <li class="rowflex">
        <div class="info-item c666">联系电话</div>
        <div>{{backgrounderInfo.mobile}}</div>
      </li>
      <li class="rowflex">
        <div class="info-item c666">工作代码</div>
        <div>{{workOrderType.name}}</div>
      </li>
      <li class="rowflex">
        <div class="info-item c666 ">任务标题</div>
        <div class="errorDescription">{{orderInfo.workOrderTitle}}</div>
      </li>
      <li class="rowflex">
        <div class="info-item c666 ">任务描述</div>
        <div class="errorDescription">{{orderInfo.errorDescription}}</div>
      </li>
      <li class="rowflex" v-if="orderInfo.demand">
        <div class="info-item c666 ">任务要求</div>
        <div class="errorDescription">{{orderInfo.demand}}</div>
      </li>
    </ul>
  </div>

    <group v-if="!isFinished" label-width="0.8rem" label-align="left" gutter="0.1rem" style="font-size: 0.15rem !important;">
      <x-textarea title="完成情况" :required="true" v-model="formdata.state" :max="140" placeholder="请输入">
      </x-textarea>
      <cell title="图片上传" is-link @click.native="showPopup()">
        <span slot="child" class="child">{{picPathList.length}}张图片</span>
        <img slot="after-title" width="20" style="margin-right:5px;"
             src="~assets/images2/icon_shangchuan@3x.png"/>
      </cell>
    </group>

    <section v-if="!isFinished" class="bottom_bar cfff" @click="finishWork()">
      处理完成
    </section>

    <div v-transfer-dom>
      <popup v-model="picPopup" height="90%" style="background-color: #fff">
        <popup-header
          left-text="取消"
          right-text="确认"
          title="工单处理图片"
          :show-bottom-border="false"
          @on-click-left="showPopup"
          @on-click-right="showPopup"></popup-header>
        <UploadImage :imgs="picPathList"></UploadImage>
      </popup>
    </div>
  </div>
</template>

<script>
    import {Group, XInput, XTextarea, Selector, Cell, Icon, XButton, PopupHeader, Popup, TransferDom, Radio, PopupPicker, } from 'vux'
    import UploadImage from './uploadImage.vue'
    export default {
      name: "EnWorkingInOrder",
      components: {
        Group,
        XInput,
        XTextarea,
        Selector,
        Cell,
        Icon,
        XButton,
        PopupHeader,
        Popup,
        Radio,
        UploadImage,
        PopupPicker,
      },
      directives: {
        TransferDom
      },
      data() {
        return {
          orderInfo: {},
          backgrounderInfo: {},
          workOrderType: {},
          picPopup: false,
          formdata: {
            arriveFileStore: '',
            state: ''
          },
          picPathList: [],
          picIdList: [],
          isFinished: false
        }
      },
      created() {
        if(this.$route.query.finish) {
          this.isFinished = true
        }
      },
      mounted () {
        let id = this.$route.query.orderId
        console.log(this.$route.query.orderId)
        this.orderId = id
        this.$http.get('/work/api/workorder/'+id).then(res=> {
            this.orderInfo = res.data.data
            this.backgrounderInfo = res.data.data.backgrounder
            this.workOrderType = res.data.data.workOrderType
            console.log(this.orderInfo)
          }
        )
      },
      methods: {
        showPopup: function () {
          this.picPopup = !this.picPopup
        },
        finishWork: function () {
          if (this.formdata.state == ''){
            this.$vux.alert.show({
              title: '提示',
              content: '请填写完成情况'
            })
            return false
          }
          if (this.picPathList) {
            for (var i = 0; i < this.picPathList.length; i++) {
              this.picIdList.push(this.picPathList[i].id)
            }
          }
          this.formdata.arriveFileStore = this.picIdList.join(';')

          this.$http.put('/work/api/workorder/in/finishInhand/'+this.orderId, this.formdata).then(res=>{
              this.$vux.toast.show({
                text: '已完成'
              })
              let that = this
              setTimeout(function () {
                that.$router.push({path: '/engineer/enMyOrders', query: {orderId: this.orderId}})
              },1000)
            }
          )
        }
      }
    }
</script>

<style lang="less">
  .enWorkingInOrder{
    .order-info {
      font-size: 0.15rem;
      background-color: #fff;
      padding-top: 0.05rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      position: relative;
      .errorDescription{
        width: 2.75rem;
      }
    }
    .order-info ul {
    }
    .order-info ul li {
      margin-top: 0.1rem;
      line-height: 0.15rem;
    }
    .repair-content {
      width: 2.5rem;
      line-height: normal;
      margin-top: -0.03rem;
    }

    .order-info .info-item {
      width: 0.75rem;
    }

    .weui-cells {
      font-size: 0.15rem;
      .weui-cell{
        padding-left: 0.1rem;
      }
      input{
        height: 31px;
        line-height: 31px;
      }
      .vux-selector.weui-cell_select {
        padding: 10px 15px;
        .weui-select {
          height: 31px;
          line-height: 31px;
        }
      }
      .weui-cell_select .weui-cell__bd:after {
        border-color: #3FBCFC;
        right: 22px;
      }
      .weui-cell_access {
        .child {
          position: absolute;
          right: 35px;
          font-size: 0.15rem;
        }
        .weui-cell__ft:after {
          border-color: #3FBCFC;
          right: 7px;
        }
      }
    }
    .vux-x-input, .weui-cell_select, .vux-x-textarea {
      .weui-cell__bd {
        padding: 2px;
        border: 0.01rem solid #E5E5E5;
        border-radius: 5px;
      }
    }

    .weui-cell__ft {

      .vux-x-input-right-full {
        margin-left: 0px;
        img {
          height: 12px;
          margin-top: 15px;
          margin-left: -12px;
          margin-right: 5px;
        }
      }
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
